<template>
  <div id="app">
    <el-container>
      <el-header>
        <nav-tab></nav-tab>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <ul>
            <li v-for="item in menus" :key="item.name">
              <router-link :to="item.path">{{ item.name }}</router-link>
            </li>
          </ul>
        </el-aside>
        <el-main>
          <!-------------快捷tab组件---------- -->
          <keep-alive :include="keepAliveView">
            <router-view v-if="isRouterAlive"></router-view>
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavTab from "./components/NavTab";
export default {
  //-----------快捷tab组件----------
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      //-----------快捷tab组件开始----------
      menus: [],
      cacheRoute: [],
      isRouterAlive: true,
      //组件name,页面要对应添加name
      keepAliveView: ["Home", "Theme", "Table"],
      //-----------快捷tab组件结束----------
    };
  },
  mounted() {
    this.menus = this.$router.options.routes; //-----------快捷tab组件----------
  },
  components: {
    NavTab, //-----------快捷tab组件----------
  },
  methods: {
    //-----------快捷tab组件开始----------
    // 添加头部导航
    handleAddNav(url, name) {
      let urlArr = [];
      for (let i of this.$store.state.cacheRoute) {
        urlArr.push(i.url);
      }
      if (url && !urlArr.includes(url)) {
        // 当前头部导航缓存路由长度
        let navLength = this.$store.state.cacheRoute.length;
        if (navLength > 9) {
          this.$message({
            message: "打开页面不能超过10个",
            type: "warning",
          });
          this.$router.back(-1);
          return;
        }
        this.cacheRoute.push;
        this.$store.dispatch("addCacheRoute", {
          name: name,
          url: url,
        });
      }
    },
    //刷新子页面
    reload() {
      this.isRouterAlive = false;
      var currentRouteName = this.keepAliveView.indexOf(this.$route.name);
      this.keepAliveView.splice(currentRouteName, 1);
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
    //-----------快捷tab组件结束----------
  },
  watch: {
    $route(to, from) {
      this.handleAddNav(to.path, to.name);
    },
  },
};
</script>
<style lang="scss">
code {
  background: black;
  color: #fff;
}
a {
  text-decoration: none;
  color: #333;
  &.router-link-exact-active {
    color: var(--main-color);
  }
}
</style>
